<template>
  <div class="space-y-8">
    <h2 class="text-2xl font-bold text-center">会员中心</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
      <!-- 免费会员 -->
      <div class="membership-card relative bg-gradient-to-br from-purple-50 to-blue-50 rounded-lg p-6 border-2 border-gray-200">
        <div class="membership-badge absolute top-4 right-4">
          <el-tag type="warning" size="small" class="tilted-badge">限时优惠</el-tag>
        </div>
        <div class="text-center mb-4">
          <h3 class="text-xl font-bold mb-2">免费会员</h3>
          <div class="text-3xl font-bold text-blue-600">0 <span class="text-sm text-gray-500">金币</span></div>
          <div class="text-sm text-gray-500">/永久</div>
        </div>
        <div class="text-sm text-gray-600 mb-4">
          注册后默认获得，适合轻度使用功能的用户。
        </div>
        <div class="space-y-2 text-sm">
          <div class="flex items-center">
            <el-icon color="#67C23A" class="mr-2"><Check /></el-icon>
            <span>文件收集 免费额度</span>
          </div>
          <div class="flex items-center">
            <el-icon color="#67C23A" class="mr-2"><Check /></el-icon>
            <span>ER图生成 (中点4)金币/次使用SQL转ER图</span>
          </div>
          <!-- 更多功能项... -->
        </div>
        <div class="mt-6 text-center">
          <el-tag type="info" size="small">当前版本</el-tag>
        </div>
      </div>

      <!-- 周会员 -->
      <div class="membership-card relative bg-gradient-to-br from-orange-50 to-red-50 rounded-lg p-6 border-2 border-orange-200">
        <div class="membership-badge absolute top-4 right-4">
          <el-tag type="warning" size="small" class="tilted-badge">限时优惠</el-tag>
        </div>
        <div class="text-center mb-4">
          <h3 class="text-xl font-bold mb-2">周会员</h3>
          <div class="text-3xl font-bold text-orange-600">1590 <span class="text-sm text-gray-500">金币</span></div>
          <div class="text-sm text-gray-500">/7天</div>
        </div>
        <div class="text-sm text-gray-600 mb-4">
          适合短期使用文件收集和ER图生成的用户
        </div>
        <div class="space-y-2 text-sm">
          <div class="flex items-center">
            <el-icon color="#67C23A" class="mr-2"><Check /></el-icon>
            <span>文件收集 免费额度</span>
          </div>
          <div class="flex items-center">
            <el-icon color="#67C23A" class="mr-2"><Check /></el-icon>
            <span>ER图生成 无限次使用SQL转ER图</span>
          </div>
          <!-- 更多功能项... -->
        </div>
        <div class="mt-6">
          <el-button type="warning" class="w-full" @click="openPurchaseDialog('week', 1590)">
            立即购买
          </el-button>
        </div>
      </div>

      <!-- 月会员 -->
      <div class="membership-card relative bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-6 border-2 border-blue-200">
        <div class="membership-badge absolute top-4 right-4">
          <el-tag type="warning" size="small" class="tilted-badge">限时优惠</el-tag>
        </div>
        <div class="text-center mb-4">
          <h3 class="text-xl font-bold mb-2">月会员</h3>
          <div class="text-3xl font-bold text-blue-600">2990 <span class="text-sm text-gray-500">金币</span></div>
          <div class="text-sm text-gray-500">/30天</div>
        </div>
        <div class="text-sm text-gray-600 mb-4">
          享受更多的免费ER图AI生成次数
        </div>
        <div class="space-y-2 text-sm">
          <div class="flex items-center">
            <el-icon color="#67C23A" class="mr-2"><Check /></el-icon>
            <span>文件收集 免费额度</span>
          </div>
          <div class="flex items-center">
            <el-icon color="#67C23A" class="mr-2"><Check /></el-icon>
            <span>ER图生成 无限次使用SQL转ER图</span>
          </div>
          <!-- 更多功能项... -->
        </div>
        <div class="mt-6">
          <el-button type="primary" class="w-full" @click="openPurchaseDialog('month', 2990)">
            立即购买
          </el-button>
        </div>
      </div>

      <!-- 年会员 -->
      <div class="membership-card relative bg-gradient-to-br from-yellow-50 to-orange-50 rounded-lg p-6 border-2 border-yellow-200">
        <div class="membership-badge absolute top-4 right-4">
          <el-tag type="danger" size="small" class="tilted-badge">限时优惠 只剩1天</el-tag>
        </div>
        <div class="text-center mb-4">
          <h3 class="text-xl font-bold mb-2">年会员</h3>
          <div class="text-3xl font-bold text-yellow-600">9990 <span class="text-sm text-gray-500">金币</span></div>
          <div class="text-sm text-gray-500">/365天</div>
          <div class="text-xs text-gray-400 line-through">原价: 12990</div>
          <div class="text-sm text-red-500">买更划算！一天仅需不到0.3元！</div>
        </div>
        <div class="space-y-2 text-sm">
          <div class="flex items-center">
            <el-icon color="#67C23A" class="mr-2"><Check /></el-icon>
            <span>文件收集 免费额度</span>
          </div>
          <div class="flex items-center">
            <el-icon color="#67C23A" class="mr-2"><Check /></el-icon>
            <span>ER图生成 无限次使用SQL转ER图</span>
          </div>
          <!-- 更多功能项... -->
        </div>
        <div class="mt-6">
          <el-button type="danger" class="w-full" @click="openPurchaseDialog('year', 9990)">
            立即购买
          </el-button>
        </div>
      </div>
    </div>

    <!-- 注意事项 -->
    <div class="text-center text-sm text-gray-500">
      <p>注意：本商品为虚拟内容，购买后不支持退款。如对订单有疑问，可以点击下方"联系我们"按钮。若要升级会员可在顶部一对一客服反馈。</p>
    </div>

    <!-- 购买确认弹窗 -->
    <el-dialog
      v-model="showPurchaseDialog"
      title="确认购买"
      width="480px"
      :before-close="handleDialogClose"
      class="purchase-dialog"
    >
      <div class="space-y-6">
        <!-- 余额信息 -->
        <div class="bg-gray-50 p-4 rounded-lg space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-gray-700 font-medium">当前可用余额：</span>
            <span class="text-lg font-bold">{{ currentBalance }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-gray-700 font-medium">此次消费金币：</span>
            <span class="text-lg font-bold text-red-500">-{{ selectedMembershipPrice }}</span>
          </div>
          <div class="border-t pt-3">
            <div class="flex justify-between items-center">
              <span class="text-gray-700 font-medium">消费后余额：</span>
              <span 
                class="text-lg font-bold"
                :class="balanceAfterPurchase >= 0 ? 'text-green-600' : 'text-red-500'"
              >
                {{ balanceAfterPurchase }}
              </span>
            </div>
          </div>
        </div>

        <!-- 余额不足提示和充值 -->
        <div v-if="balanceAfterPurchase < 0" class="space-y-4">
          <div class="text-center">
            <el-icon :size="48" color="#F56C6C" class="mb-2">
              <WarningFilled />
            </el-icon>
            <p class="text-red-600 font-medium">余额不足，请先充值，可以自己输入金额</p>
          </div>
          
          <div class="bg-blue-50 p-4 rounded-lg">
            <div class="flex items-center justify-center space-x-2 mb-3">
              <el-input-number 
                v-model="rechargeAmount" 
                :min="1" 
                :max="1000"
                class="w-24"
              />
              <span class="text-gray-600">元 = {{ rechargeAmount * 100 }} 金币</span>
            </div>
            
            <div class="flex justify-center space-x-3">
              <el-button type="primary" @click="payWithAlipay" class="flex items-center">
                <div class="w-4 h-4 bg-blue-500 rounded flex items-center justify-center mr-2">
                  <span class="text-white text-xs font-bold">支</span>
                </div>
                支付宝支付
              </el-button>
              <el-button type="success" @click="payWithWechat" class="flex items-center">
                <div class="w-4 h-4 bg-green-500 rounded flex items-center justify-center mr-2">
                  <span class="text-white text-xs font-bold">微</span>
                </div>
                微信支付
              </el-button>
            </div>
          </div>
        </div>

        <!-- 直接购买（余额充足时） -->
        <div v-else class="text-center">
          <el-icon :size="48" color="#67C23A" class="mb-2">
            <SuccessFilled />
          </el-icon>
          <p class="text-green-600 font-medium mb-4">余额充足，可以直接购买</p>
          <el-button type="primary" size="large" @click="confirmPurchase" :loading="purchasing">
            确认购买 {{ getMembershipName(selectedMembershipType) }}
          </el-button>
        </div>

        <!-- 说明文字 -->
        <div class="text-sm text-gray-500 bg-yellow-50 p-3 rounded border-l-4 border-yellow-400">
          <p class="mb-1">
            <el-icon class="mr-1"><InfoFilled /></el-icon>
            如果你已经购买过会员，重复购买会员会动累加时间。
          </p>
          <p>若要升级会员可在顶部一对一客服反馈。</p>
        </div>
      </div>

      <template #footer>
        <div class="flex justify-end space-x-3">
          <el-button @click="showPurchaseDialog = false">取消</el-button>
          <el-button 
            v-if="balanceAfterPurchase >= 0"
            type="primary" 
            @click="confirmPurchase"
            :loading="purchasing"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { 
  Check, 
  WarningFilled, 
  SuccessFilled, 
  InfoFilled 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 弹窗控制
const showPurchaseDialog = ref(false)
const selectedMembershipType = ref('')
const selectedMembershipPrice = ref(0)
const purchasing = ref(false)

// 用户余额（模拟数据）
const currentBalance = ref(0)
const rechargeAmount = ref(6)

// 计算购买后余额
const balanceAfterPurchase = computed(() => {
  return currentBalance.value - selectedMembershipPrice.value
})

// 获取会员类型名称
const getMembershipName = (type: string) => {
  const names: Record<string, string> = {
    week: '周会员',
    month: '月会员',
    year: '年会员'
  }
  return names[type] || ''
}

// 打开购买弹窗
const openPurchaseDialog = (type: string, price: number) => {
  selectedMembershipType.value = type
  selectedMembershipPrice.value = price
  showPurchaseDialog.value = true
}

// 关闭弹窗
const handleDialogClose = () => {
  showPurchaseDialog.value = false
  purchasing.value = false
}
const emit = defineEmits(['pay'])
// 支付宝支付
const payWithAlipay = () => {
  ElMessage.success('正在跳转到支付宝支付...')
  // 模拟支付成功后增加余额
  setTimeout(() => {
    // currentBalance.value += rechargeAmount.value * 100
    // ElMessage.success(`充值成功！获得 ${rechargeAmount.value * 100} 金币`)
    const order = { payType: 'alipay', amount: rechargeAmount.value * 100}
    emit('pay', order)
  }, 2000)
}

// 微信支付
const payWithWechat = () => {
  ElMessage.success('正在跳转到微信支付...')
  // 模拟支付成功后增加余额
  setTimeout(() => {
    // currentBalance.value += rechargeAmount.value * 100
    // ElMessage.success(`充值成功！获得 ${rechargeAmount.value * 100} 金币`)
    const order = { payType: 'wechat', amount: rechargeAmount.value * 100}
    emit('pay', order)
  }, 2000)
}

// 确认购买
const confirmPurchase = async () => {
  if (balanceAfterPurchase.value < 0) {
    ElMessage.error('余额不足，请先充值')
    return
  }

  purchasing.value = true
  
  try {
    // 模拟购买过程
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // 扣除金币
    currentBalance.value -= selectedMembershipPrice.value
    
    ElMessage.success(`${getMembershipName(selectedMembershipType.value)} 购买成功！`)
    showPurchaseDialog.value = false
    
  } catch (error) {
    ElMessage.error('购买失败，请稍后重试')
  } finally {
    purchasing.value = false
  }
}
</script>

<style scoped>

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.space-y-3 > * + * {
  margin-top: 0.75rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.space-y-6 > * + * {
  margin-top: 1.5rem;
}

.space-y-8 > * + * {
  margin-top: 2rem;
}

.membership-card {
  transition: transform 0.25s cubic-bezier(.4,2,.6,1), box-shadow 0.25s;
  box-shadow: 0 2px 12px 0 rgb(64 112 244 / 8%);
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.membership-card:hover {
  transform: translateY(-12px) scale(1.06);
  box-shadow: 0 8px 32px 0 rgb(64 112 244 / 18%), 0 1.5px 8px 0 rgb(0 0 0 / 6%);
  z-index: 2;
}

.membership-badge {
  position: absolute;
  top: 0.5rem;
  right: -1.2rem;
  z-index: 10;
  pointer-events: none;
}
.tilted-badge {
  display: inline-block;
  transform: rotate(18deg) translateY(-10px) translateX(20px) scale(1.1);
  font-weight: bold;
  background: linear-gradient(90deg, #ffed4a 60%, #ff9800 100%);
  color: #b45309 !important;
  border: none !important;
  box-shadow: 0 2px 8px 0 rgb(255 193 7 / 18%);
  letter-spacing: 1px;
  font-size: 13px !important;
  padding: 2px 16px !important;
  transition: box-shadow 0.2s, transform 0.2s;
  pointer-events: auto;
}
.membership-card:hover .tilted-badge {
  box-shadow: 0 4px 16px 0 rgb(255 193 7 / 32%);
  transform: rotate(18deg) translateY(-14px) translateX(24px) scale(1.18);
}

/* 弹窗样式优化 */
:deep(.purchase-dialog .el-dialog__header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  border-bottom: 1px solid #f0f0f0;
  padding-right: 0px !important;
  .el-dialog__headerbtn {
    width: auto;
    height: auto;
    position: inherit;
    .el-dialog__close > svg {
     width: 24px;
     height: 24px;
  }

  } 
}

:deep(.purchase-dialog .el-dialog__body) {
  padding: 24px;
}

:deep(.purchase-dialog .el-dialog__footer) {
  padding: 0 24px 24px;
  border-top: 1px solid #f0f0f0;
}
</style>
